<template>
  <div class="app-container">
    <el-row :gutter="10">
      <el-col :span="24" :xs="24">
        <!-- 数据筛选表单 -->
        <el-form
          ref="queryForm"
          :model="queryParams"
          :inline="true"
          label-width="100px"
        >
          <el-form-item label="房型名称" prop="typeId">
            <el-select v-model="queryParams.typeId" placeholder="请选择房型">
              <el-option
                v-for="item in typeOptions"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeId"
                @keyup.enter.native="handleQuery"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="床位数" prop="bed">
            <el-select v-model="queryParams.typeId" placeholder="请选择床位数">
              <el-option
                v-for="item in typeOptions"
                :key="item.typeId"
                :label="item.bed"
                :value="item.typeId"
                @keyup.enter.native="handleQuery"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="状态" prop="roomStatus">
            <el-select
              v-model="queryParams.roomStatus"
              placeholder="请选择状态"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.statusId"
                :label="item.statusName"
                :value="item.statusId"
                @keyup.enter.native="handleQuery"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="楼层" prop="roomFloor">
            <el-select v-model="queryParams.roomFloor" placeholder="请选择楼层">
              <el-option
                v-for="item in floorOptions"
                :key="item.floorId"
                :label="item.floorName"
                :value="item.floorId"
                @keyup.enter.native="handleQuery"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <!-- 数据筛选操作按钮 -->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="handleQuery"
              >搜索
            </el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
              >重置
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 数据表格 -->
        <el-table v-loading="loading" :data="newList">
          <!-- 数据表格列 -->

          <el-table-column label="房间号" align="center" prop="roomNo" />
          <el-table-column
            label="房型名称"
            align="center"
            prop="hotelType.typeName"
          />
          <el-table-column label="床位数" align="center" prop="hotelType.bed" />
          <el-table-column label="楼层" align="center" prop="roomFloor" />
          <el-table-column label="状态" align="center" prop="roomStatus" />
          <el-table-column label="价格" align="center" prop="hotelType.price" />
          <!-- 数据行操作按钮 -->
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text"
                icon="el-icon-edit"
                @click="handleCheckin(scope.row)"
                >入住
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <!-- 数据分页加载 -->
        <el-pagination
          :current-page="pageNum"
          :page-sizes="[5, 10, 50, 100]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="newList.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          @pagination="getList"
        />
      </el-col>
    </el-row>

    <!-- 入住对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <div class="roominfo">
        <h3>房间信息</h3>
        <el-form
          ref="roomForm"
          :model="roomForm"
          :rules="rules"
          label-width="120px"
        >
          <el-col :span="24">
            <el-card>
              <el-col :span="8">
                <el-form-item label="房间号:">{{
                  roomForm.roomNo
                }}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="房间类型名称:">{{
                  hotelType.typeName
                }}</el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="房价单价:">{{
                  hotelType.price
                }}</el-form-item>
              </el-col>
            </el-card>
          </el-col>
        </el-form>
      </div>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <div style="width: 800px">
          <div class="add-customerinfo" style="float: left; width: 380px">
            <h3>客户信息</h3>
            <el-form
              ref="form.hotelCutsomer"
              :model="form.hotelCustomer"
              :rules="rules"
              label-width="80px"
            >
              <!-- 数据编辑表单组件 -->
              <el-card>
                <el-form-item label="姓名" prop="customerName">
                  <el-input
                    v-model="form.hotelCustomer.customerName"
                    placeholder="请输入姓名"
                  />
                </el-form-item>
                <el-form-item label="身份证号" prop="idNo">
                  <el-input
                    v-model="form.hotelCustomer.idNo"
                    placeholder="请输入身份证号"
                  />
                </el-form-item>
                <el-form-item label="电话号码" prop="phone">
                  <el-input
                    v-model="form.hotelCustomer.phone"
                    placeholder="请输入电话号码"
                  />
                </el-form-item>
                <el-form-item label="说明" prop="customerDesc">
                  <el-input
                    v-model="form.hotelCustomer.customerDesc"
                    placeholder="请输入说明"
                  />
                </el-form-item>
              </el-card>
            </el-form>
          </div>

          <div class="add-checkininfo" style="float: left; width: 380px">
            <h3>其他信息</h3>
            <el-form
              ref="form.hotelCheckin"
              :model="form.hotelCheckin"
              :rules="rules"
              label-width="100px"
            >
              <!-- 数据编辑表单组件 -->
              <el-card>
                <el-form-item
                  label="入住时间"
                  prop="checkinTime"
                  :rules="[
                    {
                      type: 'string',
                      required: ture,
                      message: '请选择入住时间',
                      trigger: 'change',
                    },
                  ]"
                >
                  <el-date-picker
                    v-model="form.hotelCheckin.checkinTime"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker>
                </el-form-item>

                <el-form-item label="预住天数" prop="reserveDay">
                  <el-col :span="16">
                    <el-input
                      v-model.number="form.hotelCheckin.reserveDay"
                      placeholder="请输入预住天数"
                    />
                  </el-col>
                  <el-button type="primary" @click="handleCheckinTime"
                    >确定</el-button
                  >
                </el-form-item>
                <el-form-item label="预离时间:" prop="reserveTimeLeave">
                  <!-- {{
                    addDate(
                      form.hotelCheckin.checkinTime,
                      form.hotelCheckin.reserveDay
                    )
                  }} -->
                  <el-input
                    v-model="form.hotelCheckin.reserveTimeLeave"
                    placeholder="预离时间"
                    disabled
                    class="rt-input"
                    style=""
                  >
                  </el-input>
                  <!-- <el-date-picker
                    v-model="form.hotelCheckin.reserveTimeLeave"
                    type="date"
                    placeholder="选择日期"
                    value-format="yyyy-MM-dd"
                  >
                  </el-date-picker> -->
                  <!-- {{ form.hotelCheckin.reserveTimeLeave }} -->
                </el-form-item>

                <!-- <el-form-item label="预离时间" prop="reserveTimeLeave">
            <el-input v-model="hotelCheckin.reserveTimeLeave" placeholder="请输入预计离开时间" />
          </el-form-item> -->
                <el-form-item label="入住渠道" prop="wayDiscountName">
                  <el-select
                    v-model="form.hotelCheckin.wayDiscountName"
                    placeholder="请选择入住渠道"
                  >
                    <el-option
                      v-for="item in wayDiscountOptions"
                      :key="item.wayDiscountId"
                      :label="item.wayName"
                      :value="item.wayDiscountId"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-card>
            </el-form>
          </div>
        </div>
        <div class="paymentinfo">
          <h3>金额</h3>
          <el-form
            ref="form.hotelCheckin"
            :model="form.hotelCheckin"
            :rules="rules"
            label-width="90px"
          >
            <el-col :span="24">
              <el-card>
                <el-col :span="5">
                  <el-form-item label="房费:" prop="checkinPrice">
                    <!-- {{ hotelType.price * form.hotelCheckin.reserveDay }} -->
                    <el-input
                      v-model="form.hotelCheckin.checkinPrice"
                      placeholder="房费"
                      disabled
                    >
                    </el-input>
                    <!-- {{ form.hotelCheckin.checkinPrice }} -->
                  </el-form-item>
                </el-col>
                <el-col :span="5">
                  <el-form-item label="押金:" prop="deposit">
                    <!-- 100 -->
                    <el-input
                      v-model="form.hotelCheckin.deposit"
                      placeholder="押金"
                      disabled
                    >
                    </el-input>
                    <!-- {{ form.hotelCheckin.deposit }} -->
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="应付金额:" prop="totalMoney">
                    <!-- {{ hotelType.price * form.hotelCheckin.reserveDay + 100 }} -->
                    <el-input
                      v-model="form.hotelCheckin.totalMoney"
                      placeholder="应付金额"
                      disabled
                    >
                    </el-input>
                    <!-- {{ form.hotelCheckin.totalMoney }} -->
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="实付金额:" prop="payMoney">
                    <el-input
                      v-model="form.hotelCheckin.payMoney"
                      placeholder="请输入实付金额"
                    />
                  </el-form-item>
                </el-col>
              </el-card>
            </el-col>
          </el-form>
        </div>
      </el-form>

      <!-- 数据提交操作按钮 -->
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button type="primary" @click="submitForm">打印凭证</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
/** 导入axios Api */
import { listType, getType } from "@/api/type";
import { listRoomByPage, getRoom } from "@/api/room";
//import { addDate } from '@/api/checkin'
import { listCustomerByPage } from "@/api/customer";
import { addCheckin } from "@/api/checkin";
import { pTimeAndMoney } from "@/api/checkin";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Room",
  inject: ["reload"],
  data() {
    return {
      //Room状态
      statusOptions: [
        {
          statusId: "空闲",
          statusName: "空闲",
        },
        {
          statusId: "占用",
          statusName: "占用",
        },
        {
          statusId: "打扫",
          statusName: "打扫",
        },
      ],

      //Type床位数
      bedOptions: [
        {
          bedId: "单间",
          bedName: "单间",
        },
        {
          bedId: "双间",
          bedName: "双间",
        },
        {
          bedId: "大床",
          bedName: "大床",
        },
      ],
      //Room楼层
      floorOptions: [
        {
          floorId: 1,
          floorName: "1",
        },
        {
          floorId: 2,
          floorName: "2",
        },
        {
          floorId: 3,
          floorName: "3",
        },
        {
          floorId: 4,
          floorName: "4",
        },
      ],

      // Type类型
      typeOptions: undefined,
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 当前页
      pageNum: 0,
      // 每页数据量
      pageSize: 0,
      // Type表格数据
      roomList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 数据查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 5,
        roomNo: undefined,
        typeId: undefined,
        typeName: undefined,
        bed: undefined,
        roomFloor: undefined,
        roomStatus: undefined,
        price: undefined,
      },
      // 数据编辑表单
      roomForm: {},
      form: {
        hotelCustomer: {},
        hotelCheckin: {},
      },
      pTimeAndRoom: {
        roomId: undefined,
        checkinTime: undefined,
        reserveDay: undefined,
      },
      // checkinPrice: this.hotelType.price * this.form.hotelCheckin.reserveDay,
      hotelType: {},
      // 表单数据校验规则
      rules: {
        customerName: [
          { required: true, message: "客户名称不能为空", trigger: "blur" },
        ],
        idNo: [
          { required: true, message: "身份证号不能为空", trigger: "blur" },
        ],
        phone: [
          { required: true, message: "电话号码不能为空", trigger: "blur" },
        ],
        checkinId: [
          { required: true, message: "入住明细ID不能为空", trigger: "blur" },
        ],
        roomId: [
          { required: true, message: "房间ID不能为空", trigger: "blur" },
        ],
        customerId: [
          { required: true, message: "客户ID不能为空", trigger: "blur" },
        ],
        reserveDay: [
          { required: true, message: "预住天数不能为空", trigger: "blur" },
        ],
        checkinTime: [
          { required: true, message: "入住时间不能为空", trigger: "blur" },
        ],
        reserveTimeLeave: [
          { required: true, message: "预计退房时间不能为空", trigger: "blur" },
        ],
        deposit: [{ required: true, message: "押金不能为空", trigger: "blur" }],
        checkinPrice: [
          { required: true, message: "房费不能为空", trigger: "blur" },
        ],
        totalMoney: [
          { required: true, message: "应付总金额不能为空", trigger: "blur" },
        ],
        payMoney: [
          { required: true, message: "收到金额不能为空", trigger: "blur" },
        ],
      },
    };
  },

  created() {
    this.getList();
    listType().then((response) => {
      this.typeOptions = response.data;
    });
  },

  computed: {
    newList: function () {
      return this.roomList.filter((data) => {
        return data.roomStatus == "空闲";
      });
    },
  },
  methods: {
    /** 查询Rom数据列表 */
    getList() {
      this.loading = true;
      listRoomByPage(this.queryParams).then((response) => {
        this.roomList = response.data.list;
        this.total = response.data.total;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.loading = false;
      });
    },

    // totalNew() {
    //   return this.total - this.newList.length;
    // },

    getCustomerList() {
      this.loading = true;
      listCustomerByPage(this.queryParams).then((response) => {
        this.customerList = response.data.list;
        this.total = response.data.total;
        this.pageNum = response.data.pageNum;
        this.pageSize = response.data.pageSize;
        this.loading = false;
      });
    },

    addDate(date, days) {
      var d = new Date(date);
      d.setDate(d.getDate() + days);
      var month = d.getMonth() + 1;
      var day = d.getDate();
      if (month < 10) {
        month = "0" + month;
      }
      if (day < 10) {
        day = "0" + day;
      }
      var val = d.getFullYear() + "-" + month + "-" + day;
      return val;
    },
    /** 处理分页 */
    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val;
      this.getList();
    },

    /** 数据编辑对话框取消按钮 */
    cancel() {
      this.open = false;
      this.resetForm();
    },

    /** 数据编辑表单清空 */
    resetForm() {
      // this.roomForm = {
      //   roomNo: undefined,
      //   typeName: undefined,
      //   bed: undefined,
      //   roomFloor: undefined,
      //   roomStatus: undefined,
      //   price: undefined,
      // };
      (this.form.hotelCustomer = {
        customerName: undefined,
        idNo: undefined,
        phone: undefined,
      }),
        (this.form.hotelCheckin = {
          reserveDay: undefined,
          checkinTime: undefined,
          reserveTimeLeave: undefined,
          deposit: undefined,
          checkinPrice: undefined,
          totalMoney: undefined,
          payMoney: undefined,
        });
    },

    /** 数据筛选参数重置按钮 */
    resetQueryParams() {
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = 5;
    },

    /** 数据筛选搜索按钮 */
    handleQuery() {
      this.resetQueryParams();
      this.getList();
      this.$message.success("查询成功");
    },

    /** 数据筛选重置按钮 */
    resetQuery() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 5,
        roomNo: undefined,
        typeName: undefined,
        bed: undefined,
        roomFloor: undefined,
        roomStatus: undefined,
        price: undefined,
      };
      this.getList();
    },

    /** 添加入住操作 */
    handleCheckin(row) {
      this.resetForm();
      getRoom(row.roomId).then((response) => {
        this.roomForm = response.data;
        this.roomForm.typeId = response.data.typeId;
        getType(this.roomForm.typeId).then((response) => {
          this.hotelType = response.data;
        });

        if (this.roomForm.roomStatus == "占用") {
          this.$confirm(
            '房间号为"' + row.roomNo + '"的房间已被占用，不能安排入住',
            "警告",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          );
        } else {
          this.open = true;
          this.title = "添加入住";
        }
      });
    },

    // 点击“预住天数”后的“确定”按钮或者输入完“预住天数”回车，返回入住相关时间和费用
    handleCheckinTime() {
      console.log(this.form);
      this.form.hotelCheckin.roomId = this.roomForm.roomId;
      pTimeAndMoney(this.form).then((response) => {
        this.form = response.data;
        console.log(this.form);
        this.setForm();
        this.open = true;
      });
    },

    submitForm: function () {
      console.log(this.form.hotelCheckin.totalMoney);
      console.log(this.form.hotelCheckin.payMoney);
      console.log(this.roomForm.roomId);
      this.form.hotelCheckin.roomId = this.roomForm.roomId;
      console.log(this.form.hotelCheckin.roomId);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.hotelCheckin.payMoney < 100) {
            this.$confirm("实际支付费用小于押金，不能安排入住", "警告", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            });
          } else {
            addCheckin(this.form).then(() => {
              this.open = false;
              this.title = "";
              // this.getList();
              this.$message.success("成功！");
              this.reload();
            });
          }
        }
      });
      // this.$refs["hotelCustomer"].validata((valid) => {
      //   if (valid) {
      //   }
      // });
    },
  },
};
</script>
